<template>
  <div class="department-container">
    <el-card class="tree-card">
      <!-- 用了一个行列布局 -->
      <tree-tools :node-data="titleData" @toggle-box="toggleBox" />
      <!-- 树形菜单 -->
      <el-tree :data="departs" :props="defaultProps">
        <!-- 中间的代码就是插槽内容，用于定制每一行的布局效果 -->
        <template v-slot="scope">
          <tree-tools :node-data="scope.data" @toggle-box="toggleBox" />
        </template>
      </el-tree>
    </el-card>
    <!-- 添加部门弹窗组件 -->
    <!-- tree要通知index展示弹窗，监听tree的toggle-box -->
    <!-- props属性绑定sync修饰符作用：实现父子传值的双向绑定 -->
    <!-- perate-type就是文档中的operate-flag -->
    <add-dept :dlist="dlist" :current-pid="currentPid" :is-show-dept.sync="isShowDept" :operate-type="operateType" @on-success="onSuccess" />
  </div>
</template>

<script>
// 导入知识树组件
import TreeTools from './components/TreeTools.vue'
// 获取原始的组织架构列表
import { reqGetDepartments } from '@/api/departments'
// 导入新增弹窗组件
import AddDept from './components/AddDept'
export default {
  name: 'Departments',
  components: { TreeTools, AddDept },
  data () {
    return {
      // 加载状态
      loading: false,
      // 操作类型
      operateType: 'add',
      // 保存后台返回的原始数据dlist，负责人列表数据
      dlist: [],
      // 记录在哪个节点下添加子部门
      currentPid: '',
      // 控制添加部门弹窗标志位
      isShowDept: false,
      // 顶部标题数据
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      // 标题的数据
      // 点击首部【添加子部门】实际上添加的是一级部门(一级部门的pid应该是'')
      titleData: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        root: true,
        id: ''
      }

    }
  },
  created () {
    this.loadDepartList()
  },
  methods: {
    // 把普通的列表转换为树形结构:查找list中pid是指定值的子节点
    tranlateListToTree (list, pid) {
      const result = []
      list.forEach(item => {
        if (item.pid === pid) {
          // 第一轮找到的是所有的一级节点
          const children = this.tranlateListToTree(list, item.id)
          if (children && children.length > 0) {
            // 证明当前节点包含子节点，给当前节点添加一个子属性
            item.children = children
          }
          result.push(item)
        }
      })
      return result
    },
    // 获取部门的原始列表数据
    async loadDepartList () {
      try {
        const res = await reqGetDepartments()
        // console.log('部门原始数据', res.data)
        if (res.code === 10000) {
          // 获取部门数据列表成功
          // 保存后台返回的原始数据dlist
          this.dlist = res.data.depts
          console.log('原始数据dlist', this.dlist)
          this.titleData.name = res.data.companyName
          // this.departs = res.data.depts
          this.departs = this.tranlateListToTree(res.data.depts, '')
        }
      } catch (err) {
        console.log(err)
        this.$message.error('获取组织架构数据失败')
      } finally {
        // 无论成功与否最终都会触发finally，一般用于销毁不再使用的资源，或者重置数据
        // 隐藏loading
        this.loading = false
      }
    },

    // 处理添加操作, 显示弹层
    toggleBox (info) {
      console.log(info)
      // 接收info对象参数，修改data中的值
      this.isShowDept = info.isShowDept
      this.currentPid = info.pid
      this.operateType = info.type
    },
    // 点击按钮，刷新列表
    onSuccess () {
      this.loadDepartList()
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}
</style>
